<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>父组件传值给子组件</title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style>
			.sub{
				background-color: #ccc;
				border:1px solid black;
			}
			.parent{
				background-color: #00FFFF;
				padding: 10px;
				border:1px solid black;
			}
		</style>
	</head>
	<body>
		<div id="app">
		 	  <parent-component></parent-component>
		</div>
		<script>
			Vue.component('parent-component',{
				data:function(){
					return {
						names:['lucy','haoren','lily'],
						fontSize:16
					}
				},
				template:`
				<div class='parent'>
				   <h1>Paren-component的内容</h1>
				   <ul >
				     <li :style='{fontSize:fontSize+"px"}' :key='index' v-for='(item,index) in names'>{{item}}</li>
				   </ul>
				   <child-component @text-large='handle($event)' ></child-component>
				</div>
				 `
				 ,
				 methods:{
				 	handle:function(val){
				 		console.log('父组件的text-large事件触发',val);
						this.fontSize+=val;
				 	}
				 } 
			});
			
			 
			
			Vue.component('child-component', {
 				data: function() {
					return {
						msg: '子组件本身的数据'
					}
				},
				template: `
				   <div class='sub'>
			         <h3>{{msg}}</h3>
				     <button @click='$emit("text-large",5)'>字体扩大</button>
				   </div>
				 `
			});


			let vm = new Vue({
				el: '#app',
				data:{
					parentTitle:'父组件提供的数据'
				}

			});
		</script>
	</body>
</html>
